<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
    content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />>
  <meta http-equiv="Access-Control-Allow-Origin" content="*" />
  <title>找呀找呀找工作</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <script src="./js/main.js"></script>
  <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./js/echarts.min.js"></script>
  <script type="text/javascript" src="./js/echarts-wordcloud.js"></script>
  <script type="text/javascript" src="./js/china.js"></script>
  <script type="text/javascript" src="./js/swiper.min.js"></script>
</head>
<body>
  <div class="body-border border-nw"></div>
  <div class="body-border border-ne"></div>
  <div class="body-border border-sw"></div>
  <div class="body-border border-se"></div>
  <div class="body-title">找呀找到找工作</div>
  <div class="container">
    <div class="left-con">
      <div class="left-first">
        <div class="topic">岗位需求数量</div>
        <div class="chart" id="chart1"></div>
      </div>
      <div class="left-second">
        <div class="topic">岗位需求变化趋势</div>
        <div class="chart" id="chart2"></div>
      </div>
    </div>
    <div class="middle-con">
      <div class="middle-first">
        <div class="chart" id="chart3"></div>
      </div>
      <div class="middle-second">
        <div class="item">
          <div class="topic">
            新增就业
            <text class="t_time">(2020第二季度)</text>
          </div>
          <div class="value"><p class="value_">229</p> 万人</div>
        </div>
        <div class="item">
          <div class="topic">
            就业人数同比
            <text class="t_time">(2020第二季度)</text>
          </div>
          <div class="value">
            <p class="value_">-95</p> 万人
          </div>
        </div>
        <div class="item">
          <div class="topic">
            登记失业率
            <text class="t_time">(2020第二季度)</text>
          </div>
          <div class="value">
            <p class="value_">3.66%</p>
          </div>
        </div>
      </div>
    </div>
    <div class="right-con">
      <div class="right-pie">
        <div class="pie-box">
          <div class="topic">学历要求</div>
          <div class="chart" id="chart4"></div>
        </div>
        <div class="pie-box">
          <div class="topic">工作经验要求</div>
          <div class="chart" id="chart5"></div>
        </div>
      </div>
      <div class="right-third">
        <div class="topic">行业热词</div>
        <div class="chart" id="chart8"></div>
      </div>
      <div class="right-newjob">
        <div class="topic">最新招聘信息</div>
        <div class="swiper-container">
          <div class="swiper-wrapper" id="wrapper">
          </div>
      </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    // 数据获取
    var all_data = null;
    $.ajax({
      url: 'http://kv2.top:6081/2-204/request-all',
      crossDomain: true,
      type: 'GET',
      async: false,
      success: function(res){
        all_data = res;
        console.log(res)
      },
      error: function(err){
        console.log(err)
      }
    })
    // 界面设计
    var myChart1 = echarts.init(document.getElementById("chart1"));
    var myChart2 = echarts.init(document.getElementById("chart2"));
    var myChart3 = echarts.init(document.getElementById("chart3"));
    var myChart4 = echarts.init(document.getElementById("chart4"));
    var myChart5 = echarts.init(document.getElementById("chart5"));
    var myChart8 = echarts.init(document.getElementById("chart8"));
    var option1 = null;
    var option2 = null;
    var option3 = null;
    var option4 = null;
    var option5 = null;
    var option8 = null;
    var salvProName = Object.keys(all_data['各城市岗位需求']);
    var salvProValue = Object.values(all_data['各城市岗位需求']);
    var salvProMax =[];//背景按最大值
    for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0])
    }
    option1 = {
        grid: {
          left: '0',
          right: '10%',
          bottom: '5%',
          top: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function(params) {
            return params[0].name  + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
              show: true,
              textStyle: {
                  color: '#fff',
                  fontSize: 10
              },
          },
          splitLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          axisLine: {
              show: false
          },
          data: salvProName
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
              textStyle: {
                  color: '#ffffff',
                  fontSize: '10'
              },
          },
          data:salvProValue
        }],
        series: [{
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgb(57,89,255,1)'
                }, {
                  offset: 1,
                  color: 'rgb(46,200,207,1)'
                }]),
              },
          },
          barWidth: 10,
          data: salvProValue
        },
          {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
              normal: {
                color: 'rgba(24,31,68,1)',
                barBorderRadius: 30,
              }
            },
          },
        ]
    };
    option2 = {
      tooltip: {
          trigger: "axis",
          axisPointer: {
              type: "shadow",
              textStyle: {
                  color: "#fff"
              }
          },
      },
      color: ['#24baed','#3d3cae','#7760f6'],
      grid: {
        top: '20%',
        left: '0',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      legend: {
          textStyle: {
              color: '#ccc',
              fontSize: 14,
          },
          padding:[15,0,0,0],
          data: ['城镇失业率', 'CIER指数', '平均薪资', '全国城镇新增就业人员', '全国居民人均可支配收入']
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#ccc',
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize : 9
          }
        },
        data: ['2018第4季度','2019第1季度','2019第2季度','2019第3季度','2019第4季度','2020第1季度','2020第2季度']
      },
      yAxis: [{
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize : 1
          }
        },
        axisTick: {
        show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#ccc',
            fontSize: 100,
          }
        },
        show: false,
        max: function(value) {return (value.max * 5);},
        min: function(value) {return (value.min * 0.01);}
      },{
        type: 'value',
        position: 'right',
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize : 1
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#ccc',
            fontSize: 100,
          }
        },
        show: false,
        max: function(value) {return (value.max * 3);},
        min: function(value) {return (value.min * 0.1);}
      },{
        type: 'value',
        position: 'right',
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize : 1
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#ccc',
            fontSize: 100,
          }
        },
        show: false,
        max: function(value) {return (value.max * 1.3);},
        min: function(value) {return (value.min * 0.01);}
      }],
      series: [
        {
          name: '城镇失业率',
          type: 'line',
          stack: '总量',
          yAxisIndex: 0,
          markPoint: {
            symbolSize: 30,
              label: {
                normal: {
                  fontSize: 8,
                  textStyle: {
                      color: '#fff'
                  }
                }
              },
              data: [{
                  type: 'max',
                  name: '最大值',
              }, {
                  type: 'min',
                  name: '最小值'
              }]
          },
          data: [3.8,3.77,3.61,3.61,3.62,3.66,3.84]
        },
        {
          name: 'CIER指数',
          type: 'line',
          stack: '总量',
          yAxisIndex: 0,
          markPoint: {
            symbolSize: 30,
              label: {
                normal: {
                  fontSize: 8,
                  textStyle: {
                      color: '#fff'
                  }
                }
              },
              data: [{
                  type: 'max',
                  name: '最大值',
              }, {
                  type: 'min',
                  name: '最小值'
              }]
          },
          data: [2.38,1.68,1.89,1.92,2.18,1.43,1.35]
        },
        {
          name: '平均薪资',
          type: 'line',
          stack: '总量',
          yAxisIndex: 2,
          markPoint: {
            symbolSize: 30,
            label: {
              normal: {
                fontSize: 8,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            data: [{
              type: 'max',
              name: '最大值',
            }, {
              type: 'min',
              name: '最小值'
            }]
          },
          data: [8317,8376,8452,8698,8829,8936,9086]
        },
        {
          name: '全国城镇新增就业人员',
          type: 'line',
          stack: '总量',
          yAxisIndex: 1,
          markPoint: {
            symbolSize: 30,
              label: {
                normal: {
                  fontSize: 8,
                  textStyle: {
                      color: '#fff'
                  }
                }
              },
              data: [{
                  type: 'max',
                  name: '最大值',
              }, {
                  type: 'min',
                  name: '最小值'
              }]
          },
          data: [254,324,413,360,255,229,335]
        },
        {
          name: '全国居民人均可支配收入',
          type: 'line',
          stack: '总量1',
          yAxisIndex: 2,
          markPoint: {
            symbolSize: 30,
            label: {
              normal: {
                fontSize: 8,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            data: [{
              type: 'max',
              name: '最大值',
            }, {
              type: 'min',
              name: '最小值'
            }]
          },
          data: [7193,8493,6801,7588,7851,8561,7105]
        }
      ]
    };
    var geoCoordMap = {
      '新疆维吾尔族自治区': [86.61 , 40.79],
      '西藏藏族自治区':[89.13 , 30.66],
      '黑龙江省':[128.34 , 47.05],
      '吉林省':[126.32 , 43.38],
      '辽宁省':[123.42 , 41.29],
      '内蒙古自治区':[112.17 , 42.81],
      '北京市':[116.40 , 40.40 ],
      '宁夏回族自治区':[106.27 , 36.76],
      '山西省':[111.95,37.65],
      '河北省':[115.21 , 38.44],
      '天津市':[117.04 , 39.52],
      '青海省':[97.07 , 35.62],
      '甘肃省':[103.82 , 36.05],
      '山东省':[118.01 , 36.37],
      '陕西省':[108.94 , 34.46],
      '河南省':[113.46 , 34.25],
      '安徽省':[117.28 , 31.86],
      '江苏省':[120.26 , 32.54],
      '上海市':[121.46 , 31.28],
      '四川省':[103.36 , 30.65],
      '湖北省':[112.29 , 30.98],
      '浙江省':[120.15 , 29.28],
      '重庆市':[107.51 , 29.63],
      '湖南省':[112.08 , 27.79],
      '江西省':[115.89 , 27.97],
      '贵州省':[106.91 , 26.67],
      '福建省':[118.31 , 26.07],
      '云南省':[101.71 , 24.84],
      '台湾省':[121.01 , 23.54],
      '广西壮族自治区':[108.67 , 23.68],
      '广东省':[113.98 , 22.82],
      '海南省':[110.03 , 19.33],
      '澳门特别行政区':[113.54 , 22.19],
      '香港特别行政区':[114.17 , 22.32],
    }
    var outname = Object.keys(all_data['各省份平均工资']);
    var outvalue = Object.values(all_data['各省份平均工资']);
    var outdata = [];
    var max = 6000,
        min = 10;
    var maxSize4Pin = 100,
        minSize4Pin = 20;
    for (var i = 0; i < outname.length; i++) {
      outdata.push({
        name: outname[i],
        value: outvalue[i]
      })
    }
    // var geoCoordMap = {};
    // /*获取地图数据*/
    // var mapFeatures = echarts.getMap('china').geoJson.features;
    // mapFeatures.forEach(function(v) {
    //     var name = v.properties.name;
    //     geoCoordMap[name] = v.properties.cp;
    // });
    var convertData = function(outdata) {
      var res = [];
      for (var i = 0; i < outdata.length; i++) {
        var geoCoord = geoCoordMap[outdata[i].name];
        if (geoCoord) {
          res.push({
            name: outdata[i].name,
            value: geoCoord.concat(outdata[i].value),
          });
        }
      }
      return res;
    };
    option3 = {
      grid:{
        top:"0",
        left:"0",
        right:"0",
        bottom:"0"
      },
      tooltip: {
          show: true,
          formatter: function(params) {
            if(params.value){
              if (params.value.length > 1) {
                  return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;￥' + params.value[2] + 'k&nbsp;&nbsp;';
              } else {
                  return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;￥' + params.value + 'k&nbsp;&nbsp;';
              }
            }
          },

      },
      geo: {
          map: 'china',
          show: true,
          roam: false,
          label: {
              emphasis: {
                  show: false
              }
          },
          layoutSize: "100%",
          itemStyle: {
              normal: {
                  borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#00F6FF'
                  }, {
                      offset: 1,
                      color: '#53D9FF'
                  }], false),
                  borderWidth: 3,
                  shadowColor: 'rgba(10,76,139,1)',
                  shadowOffsetY: 0,
                  shadowBlur: 60
              }
          }
      },
      series: [
        {
          type: 'map',
          map: 'china',
          aspectScale: 0.75,
          label: {
              normal: {
                  show: false,
              },
              emphasis: {
                  show: false,
              }
          },
          // itemStyle: {
          //     normal: {
          //         areaColor: {
          //             x: 0,
          //             y: 0,
          //             x2: 0,
          //             y2: 1,
          //             colorStops: [{
          //                 offset: 0,
          //                 color: '#073684' // 0% 处的颜色
          //             }, {
          //                 offset: 1,
          //                 color: '#061E3D' // 100% 处的颜色
          //             }],
          //         },
          //         borderColor: '#215495',
          //         borderWidth: 1,
          //     },
          //     emphasis: {
          //         areaColor: {
          //             x: 0,
          //             y: 0,
          //             x2: 0,
          //             y2: 1,
          //             colorStops: [{
          //                 offset: 0,
          //                 color: '#061E3D' // 0% 处的颜色
          //             }, {
          //                 offset: 1,
          //                 color: '#073684' // 100% 处的颜色
          //             }],
          //         },
          //     }
          // },

        itemStyle: {
          normal: {
            areaColor: '#061E3D',
            borderColor: '#0a53e9',//线
            shadowColor: '#092f8f',//外发光
            shadowBlur: 20
          },
          emphasis: {
            areaColor: '#073684',//悬浮区背景
          }
        },
            data: outdata,
        }, 
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          rippleEffect: {
              brushType: 'stroke'
          },
          showEffectOn: 'render',
          itemStyle: {
              normal: {
                  color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [{
                          offset: 0,
                          color: 'rgba(5,80,151,0.2)'
                      }, {
                          offset: 0.8,
                          color: 'rgba(5,80,151,0.8)'
                      }, {
                          offset: 1,
                          color: 'rgba(0,108,255,0.7)'
                      }],
                      global: false // 缺省为 false
                  },
              }

            },
            label: {
                normal: {
                    show: true,
                    color: '#fff',
                    fontWeight: 'bold',
                    position: 'inside',
                    formatter: function(para) {
                        return '{cnNum|' + para.data.value[2] + '}'
                    },
                    rich: {
                        cnNum: {
                            fontSize: 13,
                            color: '#D4EEFF',
                        }
                    }
                },
            },
            symbol: 'circle',
            symbolSize: function(val) {
                if (val[2] === 0) {
                    return 0;
                }
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = maxSize4Pin - a * max;
                return a * val[2] + b * 1.2;
            },
            data: convertData(outdata),
            zlevel: 1,
        }]
    };
    function getData1(color) {
      var pie_data = [];
      var piename = Object.keys(all_data['学历要求']);
      var pievalue = Object.values(all_data['学历要求']);
      for(var i=0; i<piename.length; i++){
        pie_data[i] = {
          value: pievalue[i],
          name: piename[i],
          itemStyle: {
              color: color
          }
        }
      }
      return pie_data;
    }
    let angle = 0;
    let value = 80;
    option4 = {
      color: ['#24baed', '#3d3cae', '#7760f6'], 
      grid:{
        top:"50%",
        left:"0",
        right:"0",
        bottom:"0"
      },
      // color: ['#fc962c', '#d83472', '#0F9AF8', '#2B63D5', '#2039C3', '#2ECACE','#6F81DA'],
      tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      series: [
        {
        name: '学历要求',
        type: 'pie',
        radius: ['30%', '65%'],
        label: {
          normal: {
              show: true,
              position: 'inner'
          },
        },
        data: getData1().map(item => {
          return {
            value: item.value,
            name: item.name
          }
        })
      },
        {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
              type: 'arc',
              shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
                  startAngle: (0+angle) * Math.PI / 180,
                  endAngle: (90+angle) * Math.PI / 180
              },
              style: {
                  stroke: "#8383FA",
                  fill: "transparent",
                  lineWidth: 1.5
              },
              silent: true
          };
        },
        data: [0]
      },
        {
          name: "ring5",  //紫点
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function(params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
            let point = getCirlPoint(x0, y0, r, (90+angle))
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4
              },
              style: {
                stroke: "#8450F9",      //绿
                fill: "#8450F9"
              },
              silent: true
            };
          },
          data: [0]
        },
        {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
              type: 'arc',
              shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
                  startAngle: (180+angle) * Math.PI / 180,
                  endAngle: (270+angle) * Math.PI / 180
              },
              style: {
                  stroke: "#4386FA",
                  fill: "transparent",
                  lineWidth: 1.5
              },
              silent: true
          };
        },
        data: [0]
      },
        {
          name: "ring5",  //紫点
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function(params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
            let point = getCirlPoint(x0, y0, r, (270+angle))
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4
              },
              style: {
                stroke: "#4386FA", //绿
                fill: "#4386FA"
              },
              silent: true
            };
          },
          data: [0]
        },
        {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,
                        startAngle: (270+-angle) * Math.PI / 180,
                        endAngle: (40+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,
                        startAngle: (90+-angle) * Math.PI / 180,
                        endAngle: (220+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#FF8E89",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85;
                let point = getCirlPoint(x0, y0, r, (90+-angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#FF8E89",//粉
                        fill: "#FF8E89"
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {
            name: "ring5",  //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85;
                let point = getCirlPoint(x0, y0, r, (270+-angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#0CD3DB",      //绿
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        },]
    };
    
    function getData2(color) {
      var pie_data = [];
      var piename = Object.keys(all_data['工作经验要求']);
      var pievalue = Object.values(all_data['工作经验要求']);
      for(var i=0; i<piename.length; i++){
        pie_data[i] = {
          value: pievalue[i],
          name: piename[i],
          itemStyle: {
              color: color
          }
        }
      }
      return pie_data;
    }
    option5 = {
      color: ['#24baed', '#3d3cae', '#7760f6'], 
      grid:{
        top:"50%",
        left:"0",
        right:"0",
        bottom:"0"
      },
      // color: ['#fc962c', '#d83472', '#0F9AF8', '#2B63D5', '#2039C3', '#2ECACE','#6F81DA'],
      tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      series: [
        {
        name: '工作经验要求',
        type: 'pie',
        radius: ['30%', '65%'],
        label: {
          normal: {
              show: true,
              position: 'inner'
          },
        },
        data: getData2().map(item => {
          return {
            value: item.value,
            name: item.name
          }
        })
      },
        {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
              type: 'arc',
              shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
                  startAngle: (0+angle) * Math.PI / 180,
                  endAngle: (90+angle) * Math.PI / 180
              },
              style: {
                  stroke: "#8383FA",
                  fill: "transparent",
                  lineWidth: 1.5
              },
              silent: true
          };
        },
        data: [0]
      },
        {
          name: "ring5",  //紫点
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function(params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
            let point = getCirlPoint(x0, y0, r, (90+angle))
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4
              },
              style: {
                stroke: "#8450F9",      //绿
                fill: "#8450F9"
              },
              silent: true
            };
          },
          data: [0]
        },
        {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
              type: 'arc',
              shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
                  startAngle: (180+angle) * Math.PI / 180,
                  endAngle: (270+angle) * Math.PI / 180
              },
              style: {
                  stroke: "#4386FA",
                  fill: "transparent",
                  lineWidth: 1.5
              },
              silent: true
          };
        },
        data: [0]
      },
        {
          name: "ring5",  //紫点
          type: 'custom',
          coordinateSystem: "none",
          renderItem: function(params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
            let point = getCirlPoint(x0, y0, r, (270+angle))
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4
              },
              style: {
                stroke: "#4386FA", //绿
                fill: "#4386FA"
              },
              silent: true
            };
          },
          data: [0]
        },
        {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,
                        startAngle: (270+-angle) * Math.PI / 180,
                        endAngle: (40+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,
                        startAngle: (90+-angle) * Math.PI / 180,
                        endAngle: (220+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#FF8E89",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85;
                let point = getCirlPoint(x0, y0, r, (90+-angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#FF8E89",//粉
                        fill: "#FF8E89"
                    },
                    silent: true
                };
            },
            data: [0]
        }, 
        {
            name: "ring5",  //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85;
                let point = getCirlPoint(x0, y0, r, (270+-angle))
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#0CD3DB",      //绿
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        },]
    };
    //获取圆上面某点的坐标(x0,y0表示坐标,r半径，angle角度)
    function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
            x: x1,
            y: y1
        }
    }
    function draw(){
        angle = angle+3
        myChart4.setOption(option4, true)
        myChart5.setOption(option5, true)
    }
    setInterval(function() {
        draw()
    }, 100);
    const colorList = [
      "rgb(12,57,176)",
      "rgb(16,83,190)",
      "rgb(18,102,201)",
      "rgb(21,122,214)",
      "rgb(25,140,220)",
      "rgb(29,161,223)",
      "rgb(32,180,226)",
      "rgb(37,205,231)"
    ]
    function getCloudData(){
      var wordname = Object.keys(all_data['行业领域']);
      var wordvalue = Object.values(all_data['行业领域']);
      var wordData = [];
      for(var i=0;i<wordname.length;i++){
        wordData[i] = {
          "name": wordname[i],
          "value": wordvalue[i]
        }
      }
      return wordData;
    }
    option8 = {
      tooltip: {
        backgroundColor: "#fff",
        axisPointer: {
          type: "none"
        },
        textStyle: {
          color: "#565656",
          lineHeight: 28
        },
        padding: 12,
        extraCssText: "box-shadow: 0px 2px 8px 0px #cacaca;border-radius: 5%;opacity: 0.9;",
        formatter: function (p) {
          return `热度：${String(p.data.value)}`;
        }
      },
      series: [{
        type: "wordCloud",
        shape: "circle",
        width: "90%",
        height: "80%",
        left: "5%",
        top: "10%",
        right: '5%',
        bottom: '10%',
        sizeRange: [10, 50],
        rotationRange: [0, 0],
        gridSize: 16,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: "sans-serif",
            color: function () {
              let index = Math.floor(Math.random() * colorList.length);
              return colorList[index];
            }
          },
          emphasis: {
            fontWeight: "bold"
          }
        },
        data: getCloudData()
      }]
    };
    myChart8.setOption(option8, true);
    if (option1 && typeof option1 === "object") {
      myChart1.setOption(option1, true);
    }
    if (option2 && typeof option2 === "object") {
      myChart2.setOption(option2, true);
    }
    if (option3 && typeof option3 === "object") {
      myChart3.setOption(option3, true);
    }
    if (option4 && typeof option4 === "object") {
      myChart4.setOption(option4, true);
    }
    if (option5 && typeof option5 === "object") {
      myChart5.setOption(option5, true);
    }
    if (option8 && typeof option8 === "object") {
      myChart8.setOption(option8, true);
    }
    
    var newjobs = all_data['最新招聘信息'];
    var newjobname = Object.keys(all_data['最新招聘信息']);
    for(var i=0;i<newjobname.length;i++){
      var swiper_slide=document.createElement("div");
      swiper_slide.className="swiper-slide";
      var newjob_card=document.createElement("div");
      newjob_card.className="newjob-card";

      var cl_pos=document.createElement("p");
      cl_pos.className="cl-pos";
      var cr_company=document.createElement("p");
      cr_company.className="cr-company";
      var cl_salary=document.createElement("p");
      cl_salary.className="cl-salary";
      var cl_jyxl=document.createElement("p");
      cl_jyxl.className="cl-jyxl";
      var cr_info=document.createElement("p");
      cr_info.className="cr-info";

      cl_pos.innerText=newjobname[i];
      cr_company.innerText=newjobs[newjobname[i]]['companyShortName'];
      cl_salary.innerText=newjobs[newjobname[i]]['salary'];
      cl_jyxl.innerText=newjobs[newjobname[i]]['workYear']+'/'+newjobs[newjobname[i]]['education'];
      cr_info.innerText=newjobs[newjobname[i]]['workType'];

      var jobimg=document.createElement("img");
      if(newjobs[newjobname[i]]['icon']&&newjobs[newjobname[i]]['icon']!=''){
        jobimg.src=newjobs[newjobname[i]]['icon'];
      }else{
        jobimg.src="./imgs/none.png";
      }

      newjob_card.appendChild(cl_pos);
      newjob_card.appendChild(cr_company);
      newjob_card.appendChild(cl_salary);
      newjob_card.appendChild(cl_jyxl);
      newjob_card.appendChild(cr_info);
      newjob_card.appendChild(jobimg);

      swiper_slide.appendChild(newjob_card);

      document.getElementById('wrapper').appendChild(swiper_slide)

    }
    var swiper = new Swiper('.swiper-container', {
      loop: true,
      slidesPerView: "auto",
      speed: 1000,
      direction : 'vertical',
      autoplay: {
        disableOnInteraction: false, //手动滑动之后不打断播放
        delay: 2000
      },
    });
  </script>
</body>
</html>